<template>
  <div id="salecard">
    <h3 class="slogan red">{{agentMsg.slogan||'游戏,乐在其中！'}}</h3>
    <group class="agent_box">
      <p>代理名称 :<span>{{agentMsg.nickname}}</span></p>
      <p>充值ID :<span>{{agentId}}</span></p>
    </group>
    <div class="form_box flex">
      <div class="input_box flex">
        <label for="playerid">玩家ID :</label>
        <input type="number" placeholder="请输入玩家ID" name="playerid" ref="playerid">
      </div>
      <button class="check" @click="checkUser">查询</button>
      <div v-if="check_res" class="check_res flex">
        <img :src="playerMsg.figure||'https://cdn.hbjxqp.happypoker.cn/static/img/avatar.png'" alt="头像">
        <div class="user_text">
            <h4>{{playerMsg.nick}}</h4>
            <p>{{playerMsg.id}}</p>
        </div>
      </div>
    </div>
     <get-goods-type :goods-list="giveCard" :goods-dec-list="cardDecList" ref="getGoodsType"></get-goods-type>
     <get-pay-code :pay-list="payList" ref="getPayCode"></get-pay-code>
     <x-button class="buy_btn" type="submit" style="background:#108ee9" @click.native="submitForm">立即购买</x-button>
  </div>
</template>

<script>
import { Group, XButton } from "vux";
import headerNav from "../../../components/header/headerNav";
import getGoodsType from "../../../components/common/getGoodsType";
import getPayCode from "../../../components/common/getPayCode";
export default {
  data() {
    return {
      islock: null, //账户状态
      agentMsg: {}, //代理信息
      agentId: null, //代理id
      playerMsg: {}, //玩家信息
      giveCard: null, //售卡列表
      check_res: false, //显示搜索结果
      cardDecList: {}, //卡注释列表
      payList: ["alipay"] //购卡选项数组
    };
  },
  created() {
    this.getSaleCard();
  },
  components: {
    headerNav,
    Group,
    XButton,
    getGoodsType,
    getPayCode
  },
  methods: {
    getSaleCard() {
      this.apiService.user
        .salecard({
          uid: this.$route.query.uid
        })
        .then(res => {
          this.islock = res.data.islock;
          this.agentMsg = res.data.userInfo;
          this.giveCard = res.data.purchasecard;
          this.agentId = res.data.agentid;
          this.giveCard.forEach(c => {
            this.cardDecList[c.id] = {
              carDec: `${c.paycard}张+<span>${c.emoticon}</span>，总共<span>${
                c.sumcard
              }</span>张`,
              carMoney: c.money
            };
          });
          //获取支付方式
          this.payList.push(res.data.pay_code);
        });
    },
    submitForm() {
      //获取选中的卡id
      let id = this.$refs.getGoodsType.selected_id;
      let payCode = this.$refs.getPayCode.pay_code;
      let selectedMoney = this.cardDecList[id].carMoney;
      this.checkUser(() => {
        this.apiService.payment
          .playerorder({
            id: id,
            money: selectedMoney,
            pay_code: payCode,
            playerid: this.$refs.playerid.value,
            agentid: this.agentId,
            ordertype: "player"
          })
          .then(res => {
            if (res.data.islocation == 1) {
              location.href = res.data.url;
            } else {
              let host = window.location.host;
              location.replace(
                `//${host}/payment?orderid=${res.data.orderid}&pay_code=${
                  res.data.pay_code
                }&ordertype=player`
              );
            }
          });
      });
    },
    checkUser(callback) {
      this.apiService.user
        .getplayerinfo({
          playerid: this.$refs.playerid.value
        })
        .then(res => {
          this.playerMsg = res.data;
          //显示查询到的用户信息
          this.check_res = true;
          if (callback && typeof callback === "function") callback();
        })
        .catch(() => {
          this.check_res = false;
        });
    }
  }
};
</script>
<style scoped>
.red {
  color: rgb(247, 93, 93);
}
.flex {
  display: flex;
  align-items: center;
}
#salecard {
  height: 100%;
}
.slogan {
  padding: 0.2rem;
  font-size: 0.3rem;
  text-align: center;
}
.agent_box p {
  padding: 0.1rem 0;
  font-size: 0.3rem;
  color: rgb(100, 100, 100);
}
.agent_box p span {
  margin-left: 0.25rem;
  color: #000;
}

.form_box {
  position: relative;
  background-color: #fff;
  margin-bottom: 0.77em;
}
.input_box {
  padding: 0 0.4rem;
  font-size: 0.28rem;
  flex: 1;
}
.input_box label {
  margin-right: 0.25rem;
}
.input_box input {
  width: 70%;
  font-size: inherit;
  color: inherit;
  height: 0.8rem;
  line-height: 0.8rem;
}
.check {
  padding: 0.23rem 0.4rem;
  font-size: 0.32rem;
  color: rgb(16, 142, 233);
  border-left: 1px solid #e5e5e5;
}
.check_res {
  position: absolute;
  padding: 0.2rem 0.4rem;
  background: rgb(255, 246, 226);
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 9;
}
.check_res img {
  margin-right: 0.8em;
  width: 0.7rem;
  height: 0.7rem;
  text-align: center;
}
.check_res .user_text h4 {
  font-size: 0.3rem;
}
.check_res .user_text p {
  font-size: 0.2rem;
  padding: 0;
}
.buy_btn {
  width: 90%;
  margin-top: 0.4rem;
}
</style>
<style>
#salecard .agent_box .weui-cells {
  margin: 0;
  padding: 0.35rem 0.35rem 0.1rem 0.35rem;
}
</style>
